import React, { useState } from 'react';
import PLCPanel from '../components/PLCPanel';
import PLCGroupPanel from '../components/PLCGroupPanel';
import PLCQueue from '../components/PLCQueue';
import './PLCPage.css';

function PLCPage() {
  const [activeTab, setActiveTab] = useState('basic');

  return (
    <div className="plc-page-container">
      <div className="plc-page-content">
        {/* 页面标题 */}
        <div className="plc-page-header">
          <h1 className="plc-page-title">PLC控制面板</h1>
        
        </div>

        {/* 标签页导航 */}
        <div className="plc-tabs">
          <button 
            className={`plc-tab ${activeTab === 'basic' ? 'active' : ''}`}
            onClick={() => setActiveTab('basic')}
          >
            基础控制
          </button>
          <button 
            className={`plc-tab ${activeTab === 'group' ? 'active' : ''}`}
            onClick={() => setActiveTab('group')}
          >
            分组控制
          </button>
          <button 
            className={`plc-tab ${activeTab === 'test' ? 'active' : ''}`}
            onClick={() => setActiveTab('test')}
          >
            PLC队列
          </button>
        </div>

        {/* 标签页内容 */}
        <div style={{ padding: '20px' }}>
          {activeTab === 'basic' && (
            <div>
              <PLCPanel />
            </div>
          )}

          {activeTab === 'group' && (
            <div>
              <PLCGroupPanel />
            </div>
          )}

          {activeTab === 'test' && (
            <div>
              <PLCQueue />
            </div>
          )}
        </div>

        {/* 页面底部 */}
        <div className="plc-page-footer">
          <p>© 2025 工业自动化控制系统 v1.0</p>
        </div>
      </div>
    </div>
  );
}

export default PLCPage;